<template>
	<view class="auth-detail">
		<view v-show="!loading" class="info">
			<view class="flex align-center" style="gap: 28rpx;">
				<!-- <view class="title">{{info.agent_linkman}}-{{info.agent_name}}</view> -->
				<view class="title">申请人：{{info.linkman}}</view>
				<view class="tags">
					<view v-if="info.is_audit === null" class="tag-item ">未提交</view>
					<view v-if="info.is_audit === -1" class="tag-item tag-error">已驳回</view>
					<view v-if="info.is_audit === 0" class="tag-item tag-wait">待审核</view>
					<view v-if="info.is_audit === 1" class="tag-item tag-success">已审核</view>
				</view>
			</view>
			<view class="info-list">
				<view class="info-item"><view class="flex-shrink">审核服务商：</view> {{info.agent_linkman}}</view>
				<view class="info-item"><view class="flex-shrink">校园名称：</view> {{info.school_name}}</view>
				<view class="info-item"><view class="flex-shrink">申请时间：</view> {{info.apply_time}}</view>
				<block v-if="info.is_audit !== 0">
					<view class="info-item"><view class="flex-shrink">审核时间：</view> {{info.audit_time}}</view>
					<view class="info-item" style="white-space: normal; word-break: break-all;"><view class="flex-shrink">审核备注：</view> {{info.audit_msg}}</view>
				</block>
				<view class="info-item" style="display: block;">
					<view class="flex-shrink">身份证图片：</view>
					<view class="ID-card-images">
						<view class="card-item" v-for="(item, index) in info.identity_card_data" :key="index" @click="handlePreviewImage(info.identity_card_data, index)">
							<image :src="item.url" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="info-item" style="display: block;">
					<view class="flex-shrink">学生证图片：</view>
					<view class="ID-card-images">
						<view class="card-item" v-for="(item, index) in info.identity_card_data" :key="index" @click="handlePreviewImage(info.identity_card_data, index)">
							<image :src="item.url" mode="aspectFit"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="info.is_audit === -1" class="footer-btns">
			<button class="confirm-btn flex-1" @click="goAgentAuth">重新申请</button>
		</view>
	</view>
</template>

<script>
	import { previewImage } from '@/utils/uploadImg.js'
	
	export default {
		data() {
			return {
				agentId: '', // 服务商id
				info: {}, // 认证详情
				loading: true
			};
		},
		onLoad(options) {
			this.agentId = options.agentId
			this.getDetail()
		},
		methods: {
			// 预览图片
			handlePreviewImage(lists, index) {
				const list = lists.map(item=> item.url)
				previewImage(list, index)
			},
			getDetail() {
				this.loading = true
				this.$api.userIdentityDetailsApi(this.agentId).then(res=> {
					this.info = {
						...res.data,
						identity_card_data: res.data.identity_card_data ? res.data.identity_card_data.split(',').map(item=> ({url: item})) : [], // string  可选 身份证图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
						student_card_data: res.data.student_card_data ? res.data.student_card_data.split(',').map(item=> ({url: item})) : [], // string  可选 学生证图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
					}
				}).catch(err=> {
					console.log('err', err);
				}).finally(()=> {
					this.loading = false
				})
			},
			goAgentAuth() {
				uni.navigateTo({
					url: '/pages/agent/auth/auth?agentId='+this.info.agent_gid
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.auth-detail {
		padding: 32rpx;
		padding-bottom: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		
		.info {
			padding: 32rpx;
			margin-bottom: 32rpx;
			border-radius: 26rpx;
			background-color: #FFFFFF;
		}
		
		.title {
			color: #000000;
			font-size: 34rpx;
			font-weight: 400;
			text-align: left;
			line-height: 46rpx;
		}
		
		.info-list {
			gap: 16rpx;
			display: flex;
			padding-top: 36rpx;
			// padding-bottom: 38rpx;
			flex-direction: column;
		}
		
		.info-item {
			color: #999999;
			font-size: 26rpx;
			text-align: left;
			font-weight: 400;
			line-height: 36rpx;
			
			display: flex;
		}
		
		.tags {
			display: flex;
			align-items: center;
			gap: 10rpx;
		}
		
		.tag-item {
			display: flex;
			align-items: center;
			justify-content: center;
			
			padding: 4rpx 8rpx;
			border-radius: 8rpx;
			background-color: #868686;
			
			color: #FFFFFF;
			font-size: 18rpx;
			font-weight: 400;
			line-height: 24rpx;
			text-align: left;
		}
		
		.tag-success {
			background-color: #009D6E;
		}
		
		.tag-complate {
			background-color: #D4D4D4;
		}
		
		.tag-wait {
			background-color: #003D99;
		}
		
		.tag-error {
			background-color: #ff5252;
		}
		
		.ID-card-images {
			gap: 20rpx;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			// display: flex;
			// align-items: center;
			padding-top: 24rpx;
			padding-bottom: 8rpx;
			
			.card-item {
				flex: 1;
				height: 160rpx;
				overflow: hidden;
				border-radius: 12rpx;
				background-color: #F6F6F6;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		
		.card-images {
			gap: 20rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			padding-top: 24rpx;
			padding-bottom: 8rpx;
			
			.item-img {
				width: 160rpx;
				height: 160rpx;
				overflow: hidden;
				border-radius: 12rpx;
				background-color: #F6F6F6;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		
		
		.footer-btns {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			z-index: 999;
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			box-shadow: 0px 0px 33rpx rgba(0, 0, 0, 0.05);
			padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		
			gap: 14rpx;
			display: flex;
			align-items: center;
		}
	}
</style>
